<!--
 * @页面名称:职务管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card positionManagement">
    <splitpanes :dbl-click-splitter="false" style="background-color: #fff; display: flex; height: 100%">
      <pane size="15">
        <el-form :inline="true" :model="formInlineData" class="demo-form-inline">
          <el-form-item label="选择全宗:">
            <el-tree-select
              style="width: 100%"
              check-strictly
              v-model="formInlineData.Fonds_ID"
              @change="getDeptData"
              node-key="Fonds_ID"
              :props="{ label: 'Fonds_Name', children: 'children' }"
              :data="FatherData"
              :render-after-expand="false"
            />
          </el-form-item>
        </el-form>
        <ztree
          style="height: calc(100% - 50px)"
          :setting="treeSetting.setting"
          :nodes="treeSetting.treeData"
          @onClick="onClick"
        ></ztree>
      </pane>
      <pane size="85">
        <el-space style="margin-left: 5px">
          <el-button :disabled="BtnStatus[0]" type="primary" @click="add">新增</el-button>
          <el-button :disabled="BtnStatus[1]" @click="edit">修改</el-button>
          <el-button :disabled="BtnStatus[2]" type="danger" @click="del">删除</el-button>
        </el-space>
        <div style="height: calc(100% - 40px); margin-left: 5px; margin-top: 5px">
          <Stable :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></Stable>
        </div>
      </pane>
    </splitpanes>
    <!-- 新增修改弹出框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="职位名称:" prop="Position_Name">
          <el-input v-model="formData.Position_Name"></el-input>
        </el-form-item>
        <el-form-item label="职位描述:" prop="Position_Describe">
          <el-input v-model="formData.Position_Describe"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { transTree } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

const { proxy } = useCurrentInstance();
// 全宗表单绑定字段
const formInlineData = reactive({
  Fonds_ID: ""
});
// 树结构全宗
const FatherData = ref<any[]>([]);
// 按钮状态
const BtnStatus = ref([true, true, true]);
// 左侧树配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: true,
        idKey: "Dept_ID",
        pIdKey: "Dept_Father"
      },
      key: {
        name: "Dept_Name"
      }
    },
    view: {
      showIcon: false
    }
  },
  treeData: [],
  treeNode: {} as any
});
// 表格配置
const tableSetting = reactive({
  columns: [
    { field: "Position_Name", title: "职位名称", sortable: true },
    { field: "Position_Describe", title: "职位描述", sortable: true }
  ],
  data: [] as any
});
// 单击保存数据
const clickObj = ref();
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
// 表单配置
const formData = reactive({
  Position_Name: "",
  Position_Describe: ""
});
// 表单实例
const formRef = ref<FormInstance>();
// 表单规则
const rules = reactive<FormRules>({
  Position_Name: [{ required: true, message: "请填写名称!", trigger: "blur" }]
});
// 获取全宗数据
const getFondsData = () => {
  proxy.$vueAxios.get("MasterBaseFonds/GetFondsTree").then((res: any) => {
    FatherData.value = transTree(res.List, "Fonds_ID", "Fonds_Father");
  });
};
// 获取部门数据
const getDeptData = () => {
  proxy.$vueAxios
    .post("Master_Base_Dept/GetConditional", {
      order: "Dept_Order asc",
      dtoList: [{ fieldName: "Fonds_ID", fieldValue: formInlineData.Fonds_ID, conditionalType: 0 }]
    })
    .then((res: any) => {
      treeSetting.treeData = res.List;
    });
};
// 树节点点击事件
const onClick = (treeNode: any) => {
  BtnStatus.value[0] = false;
  treeSetting.treeNode = treeNode;
  getData();
};
// 获取表格数据
const getData = () => {
  proxy.$vueAxios
    .post("Master_Base_Position/GetConditional", {
      order: "Position_Order asc",
      dtoList: [{ fieldName: "Dept_ID", fieldValue: treeSetting.treeNode.Dept_ID, conditionalType: 0 }]
    })
    .then((res: any) => {
      tableSetting.data = res.List;
    });
};
// 单击表格
const rowClick = ({ row }: any) => {
  clickObj.value = row;
  BtnStatus.value[1] = false;
  BtnStatus.value[2] = false;
};
// 新增
const add = () => {
  dialogSetting.title = "新增";
  dialogSetting.visible = true;
  formRef.value?.resetFields();
};
// 修改
const edit = () => {
  dialogSetting.title = "修改";
  dialogSetting.visible = true;
  nextTick(() => {
    formData.Position_Name = clickObj.value.Position_Name;
    formData.Position_Describe = clickObj.value.Position_Describe;
  });
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Position/Delete", [clickObj.value.Position_ID]).then((res: any) => {
        if (res.Mark) {
          getData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 弹出框确认事件
const handle = () => {
  formRef.value?.validate(valid => {
    if (valid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_Position", {
            position_ID: proxy.$global.createID(),
            fonds_ID: formInlineData.Fonds_ID,
            dept_ID: treeSetting.treeNode.Dept_ID,
            position_Name: formData.Position_Name,
            position_Describe: formData.Position_Describe
          })
          .then(() => {
            dialogSetting.visible = false;
            getData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_Position", {
            position_ID: clickObj.value.Position_ID,
            fonds_ID: clickObj.value.Fonds_ID,
            dept_ID: clickObj.value.Dept_ID,
            position_Name: formData.Position_Name,
            position_Describe: formData.Position_Describe
          })
          .then(() => {
            dialogSetting.visible = false;
            getData();
          });
      }
    }
  });
};
onMounted(() => {
  getFondsData();
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
